<template>
  <div class="shopping-cart">
    <button @click="toggleCart" class="cart-btn">
      <i class="icon">🛒</i>
      <span class="badge" v-if="cartItems.length > 0">{{ cartTotalQuantity }}</span>
    </button>
    
    <transition name="slide-up">
      <div v-if="isCartOpen" class="cart-dropdown">
        <div class="cart-header">
          <h3>购物车 ({{ cartItems.length }})</h3>
          <button @click="toggleCart" class="close-btn">×</button>
        </div>
        
        <div v-if="cartItems.length === 0" class="empty-cart">
          <img src="https://bpic.588ku.com/back_pic/06/15/71/86628f552176289.jpg" 
               alt="空购物车" 
               class="empty-cart-img">
          <div class="empty-cart-content">
            <p>购物车功能敬请期待</p>
            <router-link to="/shop" class="btn">去逛逛</router-link>
          </div>
        </div>
        
        <div v-else class="cart-content">
          <ul class="cart-items">
            <li v-for="(item, index) in cartItems" :key="item.id" class="cart-item">
              <img :src="item.image" :alt="item.name" class="item-image">
              <div class="item-details">
                <h4>{{ item.name }}</h4>
                <p class="item-price">¥{{ item.price }} × {{ item.quantity }}</p>
                <div class="quantity-control">
                  <button @click="decreaseQuantity(index)" :disabled="item.quantity <= 1">-</button>
                  <span>{{ item.quantity }}</span>
                  <button @click="increaseQuantity(index)">+</button>
                </div>
              </div>
              <button @click="removeFromCart(index)" class="remove-btn">×</button>
            </li>
          </ul>
          
          <div class="cart-summary">
            <div class="summary-row">
              <span>商品合计</span>
              <span>¥{{ cartSubtotal }}</span>
            </div>
            <div class="summary-row">
              <span>运费</span>
              <span>¥{{ shippingFee }}</span>
            </div>
            <div class="summary-row total">
              <span>应付总额</span>
              <span>¥{{ cartTotal }}</span>
            </div>
          </div>
          
          <div class="cart-footer">
            <router-link to="/checkout" class="btn checkout-btn" @click="toggleCart">
              去结算
            </router-link>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'ShoppingCart',
  props: {
    cartItems: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      isCartOpen: false,
      shippingFee: 10 // 运费
    }
  },
  computed: {
    cartTotalQuantity() {
      return this.cartItems.reduce((total, item) => total + item.quantity, 0)
    },
    cartSubtotal() {
      return this.cartItems.reduce((total, item) => total + (item.price * item.quantity), 0).toFixed(2)
    },
    cartTotal() {
      return (parseFloat(this.cartSubtotal) + this.shippingFee).toFixed(2)
    }
  },
  methods: {
    toggleCart() {
      this.isCartOpen = !this.isCartOpen
    },
    increaseQuantity(index) {
      this.$emit('update-quantity', { index, quantity: this.cartItems[index].quantity + 1 })
    },
    decreaseQuantity(index) {
      if (this.cartItems[index].quantity > 1) {
        this.$emit('update-quantity', { index, quantity: this.cartItems[index].quantity - 1 })
      }
    },
    removeFromCart(index) {
      this.$emit('remove-from-cart', index)
    }
  }
}
</script>

<style scoped>
.shopping-cart {
  position: relative;
}

.cart-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  position: relative;
  padding: 5px;
}

.badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: var(--primary-color);
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 购物车下拉框基础样式 */
.cart-dropdown {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 400px;
  height: 100vh;
  background: white;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #eee;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

/* 空购物车样式 - 全屏背景图片 */
.empty-cart {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.empty-cart-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.3;
}

.empty-cart-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  max-width: 80%;
}

.empty-cart-content p {
  margin: 15px 0;
  color: #333;
}

.empty-cart-content .btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: var(--primary-color);
  color: white;
  text-decoration: none;
  border-radius: 4px;
  margin-top: 15px;
}

/* 购物车内容样式 */
.cart-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.cart-items {
  padding: 0;
  margin: 0;
  list-style: none;
  flex: 1;
  overflow-y: auto;
}

.cart-item {
  display: flex;
  padding: 15px;
  border-bottom: 1px solid #eee;
  position: relative;
}

.item-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 15px;
}

.item-details {
  flex: 1;
}

.item-price {
  color: var(--primary-color);
  font-weight: bold;
  margin: 5px 0;
}

.quantity-control {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.quantity-control button {
  width: 25px;
  height: 25px;
  border: 1px solid #ddd;
  background: none;
  cursor: pointer;
}

.quantity-control span {
  margin: 0 10px;
}

.remove-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #999;
}

.cart-summary {
  padding: 15px;
  border-top: 1px solid #eee;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.summary-row.total {
  font-weight: bold;
  font-size: 1.1em;
  margin-top: 10px;
}

.cart-footer {
  padding: 15px;
  border-top: 1px solid #eee;
}

.checkout-btn {
  display: block;
  width: 100%;
  padding: 12px;
  background-color: #ff6700;
  color: white;
  text-align: center;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
}

/* 过渡动画 */
.slide-up-enter-active,
.slide-up-leave-active {
  transition: transform 0.3s ease;
}

.slide-up-enter-from,
.slide-up-leave-to {
  transform: translateX(100%);
}

@media (max-width: 768px) {
  .cart-dropdown {
    max-width: 100%;
  }
  
  .empty-cart-content {
    max-width: 90%;
  }
}
</style>